<!DOCTYPE html>
<!--完成模块的调用、启动ng、指定模块的作用范围-->
<html ng-app="myModule">
<head lang="en">
  <meta charset="UTF-8">
  <script src="js/angular.js"></script>
  <title></title>
  <style type="text/css">
    .parent {
      border: 1px solid #000;
      margin-bottom: 10px;
    }
    .son {
      /*border: 1px solid red;*/
      padding: 0 100px;
    }
    .ul-list {
      height: 30px;
    }
    .ul-list li{
      height: 28px;
      width: 28px;
      float: left;
      margin-right: 20px;
      display: block;
      border: 1px solid red;
      cursor: pointer;
    }
  </style>
</head>
<body>
<!--完成控制器的调用-->
<div ng-controller="myCtrl">

  <ul class="ul-list">
    <li ng-repeat="value in array" ng-click="pclick($index)">{{value}}</li>
  </ul>
  <button ng-click="add()">添加</button>


    
      <div class="parent" ng-repeat="tmp in cart">

        <div>{{tmp.name1}}<input type="text"><button ng-click="delete($index)">  删除</button></div>
        <div>{{tmp.name2}}<input type="text"><button ng-click="delete($index)">  删除</button></div>
        <button ng-click="addSon($index)">添加</button>
        <div class="son" ng-repeat="key in tmp.iterm">
          <p>{{key.data}}<input type="" name=""><button>删除</button></p>
        </div>
        

      </div>
</div>

<script>
  //完成模块的创建
  var app = angular.module('myModule',['ng']);
  //完成控制器的创建
  app.controller('myCtrl', function ($scope) {
    $scope.array = [0, 1, 3];
    no = 0;
    // 监听文本框的个数
    var out = [{
          one: 1,
          two: []
        },{
          one: 1,
          two: []
        },{
          one: 1,
          two: []
        }];
      //定义模型数据
    $scope.cart = [
      {
        name1:1,
        name2:2,
        iterm:[{
          data: 3
        }]
      }
    ];
    $scope.pclick = function(index) {
      out[no].one = $scope.cart.length;
      out[no].two = [];
      for(var j = 0; j < out[no].one; j++){
        out[no].two.push($scope.cart[j].iterm.length);
      }
      $scope.cart = [
        {
          name1:1,
          name2:2,
          iterm:[{
            data: 3
          }]
        }
      ];
      no = index;
      console.log(out);
      if(out[no].one > 1) {
        // 父元素的文本框
        for(var i = 0; i < out[index].one - 1; i++ ){
          $scope.cart.push({
            name1:1,
            name2:2,
            iterm:[{
              data: 3
            }]
          })
        }
      }
      // 子元素的文本框
      for(var k = 0; k < out[index].two.length; k++){
        var data = out[index].two[k];
        for(var l = 0; l < data - 1; l++){
          console.log(111);
          $scope.cart[k].iterm.push({
            data: 3
          })
        }
      }
    }
    
    //定义方法修改模型数据：添加
    $scope.add = function () {
      $scope.cart.push({
        name1:1,
        name2:2,
        iterm:[{
          data: 3
        }]
      });
    }
    $scope.addSon = function(index) {
      $scope.cart[index].iterm.push({
        data: 3
      });
    }
    //定义方法修改模型数据：删除
    $scope.delete = function (index) {
      $scope.cart.splice(index,1);
      
    }
  });
</script>
</body>
</html>